import React, { useEffect, useState } from 'react'
import './Home_business.css'
import { Anchor, Row, Col, Card, List } from 'antd';
import { Dropdown, Radio, Button } from 'antd-mobile'
import { ProductCard } from 'react-vant'
import axios from '../../../util/axios.config'
import TabBar1 from '../../../components/TabBar/TabBar';

export default function Home_business() {

  // 商家信息
  const [shopId, setShopId] = useState("65eef87bf6def4e25907274d")
  const [shopObj, setShopObj] = useState({})

  // 商家产品
  const [goodsList, setGoodsList] = useState([])

  // 获取商家信息
  useEffect(() => {
    getShopObj()
  }, [])
  const getShopObj = async () => {
    const res = await axios.get("http://47.116.116.42:3000/business/message", {
      params: {
        _id: shopId
      }
    })
    setShopObj(res.data.businessObj)
  }
  // 获取商品信息
  useEffect(() => {
    getGoodsList()
  }, [])
  const getGoodsList = async () => {
    const res = await axios.get("http://47.116.116.42:3000/business/goods/list", {
      params: {
        shopId: shopId
      }
    })
    const mapItems = (items) => {
      return items.map(item => {
        let newItem = {
          num: item.monthsale,
          price: item.price,
          title: item.name,
          thumb: item.img,
          _id: item._id,
        }

        return newItem
      })
    }
    mapItems(res.data.goodsList)
    setGoodsList(mapItems(res.data.goodsList))
  }
  // 
  return (
    <div>
      <div className='bussinesTitle'>
        <h1>{shopObj.name}</h1>
      </div>
      <div>

        {
          goodsList.map(item => {
            return (
              <ProductCard
                key={item._id}
                num={item.num}
                price={item.price}
                desc=""
                title={item.title}
                thumb={item.thumb}
              />
            )
          })
        }
      </div>

      <div className='businessBtn'>
        <Button color='warning' style={{ width: "50%", color: "black" }}>编辑</Button>
        <Button color='warning' style={{ width: "50%", color: "black" }}>添加食物</Button>
      </div>


      <TabBar1></TabBar1>
    </div>
  )
}
